<template>
    <view class="content">
        <view class="top">
            <view class="head">
                <view :class="{headActive : type == 1}" @click="chooseNav(1)">
                    <view class="head-num" :class="{headActive : type == 1}">{{ data.report }}</view>
                    <view>报备量</view>
                </view>
                <view :class="{headActive : type == 2}" @click="chooseNav(2)">
                    <view class="head-num" :class="{headActive : type == 2}">{{ data.visit }}</view>
                    <view>到访量</view>
                </view>
                <view :class="{headActive : type == 3}" @click="chooseNav(3)">
                    <view class="head-num" :class="{headActive : type == 3}">{{ data.deal }}</view>
                    <view>成交量</view>
                </view>
                <view :class="{headActive : type == 4}" @click="chooseNav(4)">
                    <view class="head-num" :class="{headActive : type == 4}">{{ data.commission }}</view>
                    <view>佣金统计</view>
                </view>
            </view>
            
            <view class="nav">
                <view :class="{navActive : tab == 1}" @click="chooseNavSecond(1)">近七日</view>
                <view :class="{navActive : tab == 2}" @click="chooseNavSecond(2)">近半个月</view>
                <view :class="{navActive : tab == 3}" @click="chooseNavSecond(3)">近一个月</view>
            </view>
        </view>
        <!-- 时间搜索 -->
        <view class="u-flex time">
            <view class="t-box" @click="KStimeShow = true">
                <input type="text" v-model="startTime" placeholder="开始时间" disabled />
                <image src="../../static/icon/time.png"></image>
            </view>
            <view class="line"></view>
            <view class="t-box" @click="JStimeShow = true">
                <input type="text" v-model="endTime" placeholder="结束时间" disabled />
                <image src="../../static/icon/time.png"></image>
            </view>
            <view class="search" @click="doSearch">搜索</view>
        </view>
        <!-- 柱状图 -->
        <!-- 楼盘报备量统计 -->
        <view class="item" v-if="chartsDataColumn1 && chartsDataColumn1.categories && chartsDataColumn1.categories.length > 0">
            <qiun-data-charts type="column" :opts="optsBar" :chartData="chartsDataColumn1" :ontouch="true" />
        </view>
        <!-- 门店报备量统计 -->
        <view class="item" v-if="chartsDataColumn2 && chartsDataColumn2.categories && chartsDataColumn2.categories.length > 0">
            <qiun-data-charts type="column" :opts="optsBar" :chartData="chartsDataColumn2" :ontouch="true" />
        </view>
        <!-- 人员报备量统计 -->
        <view class="item" v-if="chartsDataColumn3 && chartsDataColumn3.categories && chartsDataColumn3.categories.length > 0">
            <qiun-data-charts type="column" :opts="optsBar" :chartData="chartsDataColumn3" :ontouch="true" />
        </view>
        
        <view style="text-align: center;padding: 50upx 0;color: #999;font-size: 24rpx;" 
            v-if="chartsDataColumn1 && chartsDataColumn1.categories && chartsDataColumn1.categories.length == 0 && chartsDataColumn2 && chartsDataColumn2.categories && chartsDataColumn2.categories.length == 0 && chartsDataColumn3 && chartsDataColumn3.categories && chartsDataColumn3.categories.length == 0">暂无相关信息</view>
        
        <!-- 选择时间 -->
        <u-picker v-model="KStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(1, $event)"></u-picker>
        <u-picker v-model="JStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(2, $event)"></u-picker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                type: 1,
                tab: 1,
                KStimeShow: false, //开始时间
                JStimeShow: false, //结束时间
                startTime: '', //开始时间
                endTime: '', //结束时间
                timeParams: { //时间格式
                	year: true,
                	month: true,
                	day: true,
                	hour: false,
                	minute: false,
                	second: false
                },
                optsBar: {
                    dataLabel: true,//是否显示图表区域内数据点上方的数据文案
                    fontSize: 11,
                    duration: 0,//动画展示时长，单位毫秒
                    padding: [15, 15, 0, 5],
                    touchMoveLimit: 24, //图表拖拽时，每秒重新渲染的帧数（用于图表拖拽卡顿，可以降低js与视图层交互的次数，理论上24帧/秒就够用了）
                    enableScroll: true, //开启图表可拖拽滚动，开启后ontouch需要赋值为true，X轴配置里需要配置itemCount单屏幕数据点数量
                    xAxis: {
                        fontSize: 11,
                        // labelCount: 20,//数据点文字（刻度点）单屏幕限制显示的数量
                        disableGrid: true,//不绘制纵向网格(即默认绘制网格)
                        scrollShow: true,//是否显示滚动条，配合拖拽滚动使用（即仅在启用【基本配置】的 enableScroll 时有效）
                        itemCount: 4, //单屏数据密度即图表可视区域内显示的X轴数据点数量，仅在启用enableScroll时有效
                    },
                    yAxis: {
                        data: [{
                            min: 0,
                            max: 250 ,//X轴终止值（默认数据中的最大值）
                            fontSize: 11,
                        }]
                    },
                    extra: {
                        column: {
                            type: "group",
                            activeBgColor: "#000000",
                            activeBgOpacity: 0.08,
                            linearType: 'none', //是否渐变
                            barBorderCircle: false, //启用分组柱状图半圆边框
                            // barBorderRadius: [], //自定义4个圆角半径[左上,右上,右下,左下]（请关闭上面按钮）
                            width: 20, //条状图每个柱子的图形宽度
                            seriesGap: 2 //多series每个柱子之间的间距
                        }
                    }
                },
                
                chartsDataColumn1: {},
                chartsDataColumn2: {},
                chartsDataColumn3: {},
                // chartsDataColumn4: {
                //     categories: ["门店6","门店2","门店3"],
                //     series: [
                //         {
                //           "name": "门店报备量统计",
                //           "data": [35,36,150],
                //           color: '#00a1e9',
                //         }
                //     ],
                // },
                data: {},
                keyword: '',
            };
        },
        onLoad() {
            this.getList()
        },
        methods: {
            chooseNav(num) {
                if (this.type == num) return
                this.type = num
                this.doSearch()
            },
            chooseNavSecond(num) {
                if (this.tab == num) return
                this.tab = num
                this.doSearch()
            },
            //选择时间
            chooseTime(num, e) {
            	if (num == 1) {
                    this.startTime = e.year + '-' + e.month + '-' + e.day;
            	}
                if (num == 2) {
                    this.endTime = e.year + '-' + e.month + '-' + e.day;
            	}
            },
            // 搜索
            doSearch() {
                this.getList()
            },
            
            getList() {
            	this.$ajax('data_statistics', {
            		user_token: this.$getSync('userToken'),
                    status: this.tab,//1近7日 2近半月 3近1月
                    start_time: this.startTime,//开始时间
                    end_time: this.endTime,//结束时间
                    name: this.keyword,//搜索
                    type: this.type, //1报备 2到访 3成交 4佣金 5销售 6利润
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.data = ret.detail
                        if (this.data && this.data.stores_categories && this.data.stores_categories.length > 0) {
                            this.chartsDataColumn1 = {
                                categories: [],
                                series: [],
                            }
                            this.chartsDataColumn1.categories = this.data.stores_categories
                            var ser1 = this.data && this.data.stores_series && this.data.stores_series[0]
                            this.chartsDataColumn1.series[0] = {
                                name: ser1.name,
                                color: '#00a1e9',
                                data: ser1.data
                            }
                        }
                        if (this.data && this.data.properties_categories && this.data.properties_categories.length > 0) {
                            this.chartsDataColumn2 = {
                                categories: [],
                                series: [],
                            }
                            this.chartsDataColumn2.categories = this.data.properties_categories
                            var ser2 = this.data && this.data.properties_series && this.data.properties_series[0]
                            this.chartsDataColumn2.series[0] = {
                                name: ser2.name,
                                color: '#fe6155',
                                data: ser2.data
                            }
                        }
                        if (this.data && this.data.users_categories && this.data.users_categories.length > 0) {
                            this.chartsDataColumn3 = {
                                categories: [],
                                series: [],
                            }
                            this.chartsDataColumn3.categories = this.data.users_categories
                            var ser3 = this.data && this.data.users_series && this.data.users_series[0]
                            this.chartsDataColumn3.series[0] = {
                                name: ser3.name,
                                color: '#ff994e',
                                data: ser3.data
                            }
                        }
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    
    
    page{
        background-color: #f5f5f5;
        border-top: 2rpx solid #e6e6e6;
    }
    .content{
        padding-bottom: 50rpx;
    }
    .top{
        background-color: #fff;
        padding-top: 20rpx;
    }
    .head{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20rpx;
    }
    .head>view{
        width: calc(665rpx / 4);
        height: 120rpx;
        background-color: #f5f5f5;
        border-radius: 15rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        color: #595959;
    }
    .head-num{
        font-size: 36rpx;
        color: #00a1e9;
    }
    .headActive{
        color: #fff !important;
        background-color: #00a1e9 !important;
    }
    .nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .nav>view{
        width: calc(100vw / 3);
        padding: 30rpx 0;
        font-size: 26rpx;
        text-align: center;
    }
    .navActive{
        font-size: 28rpx;
        font-weight: bold;
        color: #00a1e9;
        border-bottom: 2rpx solid #00a1e9;
    }
    
    .time {
        width: 100%;
        padding: 20rpx;
        .t-box{
            flex: 1;
            height: fit-content;
            background-color: #fff;
            position: relative;
            padding-right: 70rpx;
            border-radius: 10rpx;
            
            image{
                display: block;
                width: 38rpx;
                height: 36rpx;
                position: absolute;
                top: 50%;
                right: 22rpx;
                margin-top: -19rpx;
            }
        }
    
        input {
            width: 100%;
            height: 68rpx;
            font-size: 24rpx;
            color: #333333;
            text-indent: 25rpx;
            line-height: 68rpx;
            padding-left: 10rpx;
        }
    
        .line {
            width: 16rpx;
            height: 4rpx;
            background-color: #803906;
            margin: 0 10rpx;
        }
    
        .search {
            font-size: 24rpx;
            color: #803906;
            line-height: 68rpx;
            background-color: #ffecd2;
            // background: linear-gradient(to right , #fff2de , #f7d4a7);
            border-radius: 10rpx;
            padding: 0 48rpx;
            margin-left: 20rpx;
        }
    }
    
    
    .item{
        padding: 35rpx 15rpx;
        background-color: #fff;
        margin-bottom: 20rpx;
        font-size: 24rpx;
        color: #777c85;
    }
    .item-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 25rpx;
    }
    .round{
        width: 26rpx;
        height: 11rpx;
        margin-right: 10rpx;
        background-color: #00a1e9;
    }
    .more-icon{
        width: 24rpx;
        height: 22rpx;
        margin-right: 10rpx;
    }
    
</style>
